<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search">
				<view class="search-ico">
					<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
				</view>
				<view class="search-input">
					<input type="text" confirm-type="search" class="search-input" placeholder="所有商品" @confirm="seacrch_good" v-model="search_name">
					</view>
				<view class="close-btn" v-if="search_name" @click="cleanInput()">
					<image lazy-load="true"  src="../../static/images/close-btn.png" class="close-btn"></image>
				</view>
			</view>
		</view>
		<view class="item-tab">
			<!-- <view class="title" @click="setActive(1)" :class="{'active':isActive == 1}">推荐</view> -->
			<view class="title" @click="setActive(2,'sell_count DESC')" :class="{'active':isActive == 2}">销量</view>
			<view class="title" @click="setActive(3,'price ASC')" :class="{'active':isActive == 3}">价格</view>
			<view class="title" @click="setActive(4,'create_time DESC')" :class="{'active':isActive == 4}">新品</view>
			<view class="title" @click="setStyle()">风格</view>
			<view class="title" @click="setCategory()">类别</view>
			<view class="title" @click="selectGoods(1)">筛选</view>
		</view>
		<view class="" style="display: none;">
			<view class="brand-list">
				<view class="brand-box"  v-for="(item , key) in brand_list" :key="key" @click="setChecked(item.id)" :class="{'active':item.checked}">
					<view class="brand"><image lazy-load="true"  :src="item.logo" mode="aspectFit" class="brand"></image></view>
				</view>
			</view>
			<view class="btn-box" >
				<view class="reset" @click="resetChecked()">重置</view>
				<view class="confirm" @click="select_good_list()">确定</view>
			</view>
		</view>
		<view class="item-list">
			<view class="item-box" v-for="(item,key) in goods_list" :key="key" @click="go_detail(item.id)">
				<view class="item-img">
					<image lazy-load="true"  :src="item.thumbnail" mode="aspectFit" class="img-list-1"></image>
				</view>
			<!-- 	<view class="item-info">
					<view class="item-name">{{item.name}}</view>
					<view class="item-price">￥{{item.real_price}}</view>
				</view> -->
				<view class="item-info">
					<view class="item-store-name">{{item.store_name}}</view>
				</view>
				<view class="item-info">
					<view class="item-name">{{item.spu_name}}</view>
				</view>
				<view class="item-info">
					<view class="item-price">￥{{item.real_price}}</view>
				</view>
			</view>
			<view class="no_msg" v-if="show_no_data">
				<image class="no_msg_img" src="../../static/images/nomsg.png" mode="widthFix"></image>
			</view>
		</view>
		<uni-drawer :visible="selectGood" @close="setSelectGood" mode="right">
		    <view class="scroll-drawer">
		        <scroll-view scroll-y="true" >
		        	<view class="drawer-box-scroll">
						<view class="drawer-title">筛选</view>
						<view class="drawer-box">
							<view class="drawer-item" v-if="goods_style_arr.length>0 &&showStyle">
								<view class="item-title">风格</view>
								<view class="sub-list">
									<view class="item-lists" v-for="(item,index) in goods_style_arr" :key="index" v-if="index<6"  @click="setCheckedStyle(item.id)" :class="{'active':item.checked}">{{item.name}}</view>
									<view class="showCate" @click="setGoodStyle" v-if="goods_style_arr.length>5 && !show_goods_style" ><text>展开</text></view>
									<block v-if="goods_style_arr.length>5 && show_goods_style">
										<view class="item-lists" v-for="(item,index) in goods_style_arr" :key="index" v-if="index>5" @click="setCheckedStyle(item.id)" :class="{'active':item.checked}">{{item.name}}</view>
										<view class="showCate" @click="setGoodStyle"  v-if="goods_style_arr.length>5 && show_goods_style && showText"><text>收起</text></view>
									</block>
								</view>
							</view>
							<view class="drawer-item" v-if="showCategory&&showStyle">
								<view class="item-title">价格</view>
								<view class="sub-list">
									<input type="number" class="price-input" v-model="low_price" placeholder="最低价" value="" />
									 — 
									<input type="number" class="price-input" v-model="high_price" placeholder="最高价" value="" />
								</view>
							</view>
							<view class="drawer-item" v-if="goods_category_arr.length>0 && showCategory">
								<view class="item-title">类别</view>
								<view class="sub-list">
									<view class="item-lists" v-for="(item,index) in goods_category_arr" :key="index" v-if="index<6" @click="setCheckedCategory(item.id)" :class="{'active':item.checked}">{{item.name}}</view>
									<view class="showCate" @click="setCateGroy" v-if="goods_category_arr.length>5 && !show_goods_category" ><text>展开</text></view>
									<block v-if="goods_category_arr.length>5 && show_goods_category">
									
									<view class="item-lists" v-for="(item,index) in goods_category_arr" :key="index" v-if="index>5" @click="setCheckedCategory(item.id)" :class="{'active':item.checked}">{{item.name}}</view>
									<view class="showCate" @click="setCateGroy"  v-if="goods_category_arr.length>5 && show_goods_category && showText"><text>收起</text></view>
									</block>
								</view>
							</view>
							<view class="drawer-item" v-if="store_arr.length>0 && showCategory && showStyle">
								<view class="item-title">门店</view>
								<view class="sub-list">
									<view class="item-lists" v-for="(item,index) in store_arr" :key="index" v-if="index<6" @click="setCheckedStore(item.id)" :class="{'active':item.checked}">{{item.name}}<view class="space">{{item.distance}}</view></view>
									<view class="showCate" @click="setStore" v-if="store_arr.length>5 && !show_store" ><text>展开</text></view>
									<block v-if="store_arr.length>5 && show_store">
									
									<view class="item-lists" v-for="(item,index) in store_arr" :key="index" v-if="index>5" @click="setCheckedStore(item.id)" :class="{'active':item.checked}">{{item.name}}<view class="space">{{item.distance}}</view></view>
									<view class="showCate" @click="setStore"  v-if="store_arr.length>5 && show_store"><text>收起</text></view>
									</block>
								</view>
							</view>
						</view>
					</view>
		        </scroll-view>
				<view class="bot-btn-box">
					<view class="btn-item" @click="resetChecked" v-if="showBtn">
						重置
					</view>
					<view class="btn-item submit-btn" :class="{'bigBtn':!showBtn}" @click="select_good_list_type">
						提交
					</view>
				</view>
		    </view>
		</uni-drawer>
		
	</view>
</template>

<script>
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	export default {
		data() {
			return {
				inputVal:'',
				isActive:2,
				selectGood:false,
				brandName:'',
				brand_list:[],
				"list":[],
				category_id:'',
				search_name:'',
				brand:[],
				store_id:0,
				p:1,
				per:20,
				sort_g:"sell_count DESC",
				goods_list:[],
				goods_style_arr:[],
				active_goods_style_id:[],
				active_goods_category_id:[],
				active_store_id:[],
				goods_category_arr:[],
				store_arr:[],
				is_bottom:false,
				clearBtn:false,
				show_goods_category:false,
				show_goods_style:false,
				show_store:false,
				show_no_data:false,
				latitude:0,
				longitude:0,
				low_price:'',
				high_price:'',
				showStyle:false,
				showCategory:false,
				showText:true,
				showBtn:true
			}
		},
		onLoad(e) {
			var self = this;
			console.log(this.$store.getters.getGoodsList);
			if(e.id&&e.id!=='undefined'){
				self.active_goods_category_id.push(e.id);
				self.category_id = e.id;
			}
			if(e.catgray_id&&e.catgray_id!=='undefined'){
				self.active_goods_category_id = e.catgray_id.split('_');
				self.category_id = e.catgray_id.split('_');
			}
			if(e.style_id&&e.style_id!=='undefined'){
				self.active_goods_style_id=e.style_id.split('_');
				self.style_id =e.style_id.split('_');
			}
			if(e.search&&e.search!=='undefined'){
				this.search_name = decodeURIComponent(e.search);
				this.clearBtn = true;
			}
			this.$request.request({
				url:'/search/brand_list',
				success:function(res){
					if(res.code==200){
						var x = res.result;
						x.forEach((item,index)=>{
							x[index].logo = self.$http_img(item.logo);
							x[index].checked = false;
						})
						self.brand_list = x
					}else{
						
					}
				}
			});
			this.$request.request({
				url:'/search/goods_style',
				success:function(res){
					if(res.code==200){
						var x = res.result;
						// x.forEach((item,index)=>{
						// 	x[index].checked = false;
						// })
						x.forEach((item,index)=>{
							if(item.id == self.active_goods_style_id){
								x[index].checked = true;
								self.inputVal = item.name
							}else{
								x[index].checked = false;
							}
							
						})
						self.goods_style_arr = x;
						console.log(x)
					}else{
						
					}
				}
			});
			this.$request.request({
				url:'/search/goods_category',
				success:function(res){
					if(res.code==200){
						var x = res.result;
						x.forEach((item,index)=>{
							if(item.id == self.active_goods_category_id){
								x[index].checked = true;
								self.inputVal = item.name
							}else{
								x[index].checked = false;
							}
							
						})
						self.goods_category_arr = x;
						console.log(x)
					}else{
						
					}
				}
			});
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
					console.log(res)
					self.latitude = res.latitude;
					self.longitude = res.longitude;
					// self.points[0].latitude = res.latitude;
					// self.points[0].longitude = res.longitude;
					
					self.getstore();
					
			    },
				fail() {
					self.latitude = 30.657420;
					self.longitude = 104.065840;
					self.getstore();
				}
			});
			this.get_good_list();
			
		
			
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=good-list&id='+e.id+'&catgray_id='+e.catgray_id+'&style_id='+e.style_id+'&search='+e.search, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=good-list&id='+e.id+'&catgray_id='+e.catgray_id+'&style_id='+e.style_id+'&search='+e.search, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			cleanInput(){
				this.search_name = '';
				this.p = 1;
				this.get_good_list();
				this.clearBtn = false;
			},
			setActive(num,msg){
				if(this.isActive !== num){
					uni.showLoading({
					    title: '加载中'
					});
					this.isActive = num;
					this.p = 1;
					this.goods_list=[];
					this.brand=[];
					this.sort_g=msg;
					this.get_good_list();
				}
				
				
			},
			setSelectGood(){
				this.selectGood = false;
			},	
			selectGoods(){
				this.selectGood = true;
				this.showStyle = true;
				this.showCategory = true;
				this.showText = true;
				this.showBtn = true;
				
			},
			setStyle(){
				this.selectGood = true;
				this.showStyle = true;
				this.showCategory = false;
				this.showText = false;
				this.showBtn = false;
				this.show_goods_style = true;
			},
			setCategory(){
				this.selectGood = true;
				this.showStyle = false;
				this.showText = false;
				this.showBtn = false;
				this.showCategory = true;
				this.show_goods_category = true;
			},
			setCateGroy(){
				this.show_goods_category = !this.show_goods_category
			},
			setGoodStyle(){
				this.show_goods_style = !this.show_goods_style
			},
			setStore(){
				this.show_store = !this.show_store
			},
			getstore(){
				var self = this;
				this.$request.request({
					url:'/search/store',
					data:{
						lng:self.longitude,
						lat:self.latitude,
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							x.forEach((item,index)=>{
								x[index].checked = false;
								x[index].distance=parseInt(item.distance)>1000 ? parseFloat(parseInt(item.distance/100)/10)+'km' : parseInt(item.distance)+'m';
							})
							
							self.store_arr = x;
							console.log(x)
						}else{
							
						}
					}
				});
			},
			setChecked(brandId){
				var self = this;
				var listArr = self.brand_list;
				
				for(var i = 0;i<self.brand_list.length;i++){
					if(self.brand_list[i].id == brandId){
						if(self.brand_list[i].checked){
							var index = self.brand.indexOf(brandId);
							self.brand.splice(index,1);
							self.brand_list[i].checked = false
						}else{
							self.brand.push(brandId);
							self.brand_list[i].checked = true
						}
					}
					
				}
			},
			setCheckedStyle(id){
				var self = this;
				var listArr = self.goods_style_arr;
				
				for(var i = 0;i<self.goods_style_arr.length;i++){
					if(self.goods_style_arr[i].id == id){
						if(self.goods_style_arr[i].checked){
							var index = self.active_goods_style_id.indexOf(id);
							self.active_goods_style_id.splice(index,1);
							self.goods_style_arr[i].checked = false
						}else{
							self.active_goods_style_id.push(id);
							self.goods_style_arr[i].checked = true
						}
					}
					
				}
			},
			setCheckedCategory(id){
				var self = this;
				var listArr = self.goods_category_arr;
				for(var i = 0;i<self.goods_category_arr.length;i++){
					if(self.goods_category_arr[i].id == id){
						if(self.goods_category_arr[i].checked){
							var index = self.active_goods_category_id.indexOf(id);
							self.active_goods_category_id.splice(index,1);
							self.goods_category_arr[i].checked = false
						}else{
							self.active_goods_category_id.push(id);
							self.goods_category_arr[i].checked = true
						}
					}
				}
			},
			select_good_list_type(){
				if((this.low_price && !this.high_price) || (!this.low_price && this.high_price)){
					uni.showToast({
						title:'最低价格和最高价格不能为空',
						icon:'none',
						duration:2000
					});
					return false;
				}
				if(parseFloat(this.low_price) > parseFloat(this.high_price)){
					uni.showToast({
						title:'最低价格不能大于最高价格',
						icon:'none',
						duration:2000
					});
					return false;
				}
				
				
				uni.showLoading({
				    title: '加载中'
				});
				this.p = 1;
				this.goods_list=[];
				this.get_good_list();
				this.selectGood = false;
			},
			setCheckedStore(id){
				var self = this;
				var listArr = self.store_arr;
				for(var i = 0;i<self.store_arr.length;i++){
					if(self.store_arr[i].id == id){
						if(self.store_arr[i].checked){
							var index = self.active_store_id.indexOf(id);
							self.active_store_id.splice(index,1);
							self.store_arr[i].checked = false
						}else{
							self.active_store_id.push(id);
							self.store_arr[i].checked = true
						}
					}
					
				}
			},
			resetChecked(){
				var self = this;
				var listArr = this.goods_style_arr;
				var listArr1 = this.goods_category_arr;
				var listArr2 = this.store_arr;
				for(var i = 0; i<listArr.length;i++){
					listArr[i].checked = false;
				}
				for(var i = 0; i<listArr1.length;i++){
					listArr1[i].checked = false;
				}
				for(var i = 0; i<listArr2.length;i++){
					listArr2[i].checked = false;
				}
				self.active_goods_style_id=[];
				self.active_goods_category_id=[];
				self.active_store_id=[];
			},
			goDetails(){
				uni.navigateTo({
				    url: '../local-store-item/local-store-item'
				});
			},
			goShop(){
				uni.openLocation({
				    latitude: 30.805601,
				    longitude: 104.031118,
				    success: function () {
				        console.log('success');
				    }
				}); 
			},
			onReachBottom(){
				if(this.is_bottom) return;
				this.is_bottom = true;
				this.p++;
				this.get_good_list();
			},
			get_good_list(){
				var self = this;
				this.$request.request({
					url:'/search/goods_list',
					data:{
						category_ids:this.active_goods_category_id.join(','),
						store_ids:this.active_store_id.join(','),
						style_ids:this.active_goods_style_id.join(','),
						low_price:this.low_price ? parseFloat(this.low_price)*100 : '',
						high_price:this.high_price ? parseFloat(this.high_price)*100 : '',
						name:this.search_name,
						p:this.p,
						per:this.per,
						sort:this.sort_g
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							uni.hideLoading();
							if(res.result.length<1){
								if(self.goods_list.length == 0){
									self.show_no_data = true
								}else{
									self.show_no_data = false
								}
								self.is_bottom = true;
								return false;
							}
							x.forEach((item,index)=>{
								x[index].thumbnail =self.$http_img(item.thumbnail);
								x[index].real_price = self.$money(item.real_price);
							})
							// x = x.concat(x).concat(x); //测试
							self.goods_list =self.goods_list.concat(x);
							self.is_bottom = false;
							console.log(self.goods_list)
							
							
						}else{
							
						}
					},
					complete:function(){
						uni.hideLoading();
					}
				});
			},
			select_good_list(){
				uni.showLoading({
				    title: '加载中'
				});
				this.p = 1;
				this.goods_list=[];
				this.get_good_list();
			},
			seacrch_good(e){
				uni.showLoading({
				    title: '加载中'
				});
				this.search_name=e.detail.value;
				this.p = 1;
				this.goods_list=[];
				this.brand=[];
				this.isActive=2;
				this.sort_g="sell_count DESC";
				this.get_good_list();
			},
			go_detail(id){
				uni.navigateTo({
				    url: '../local-store-item/local-store-item?id='+id
				});
			}
		}
	}
</script>

<style>
	@import url("good-list.css");
</style>
